<template>
  <div class="common-layout">
    <el-container>
      <!--头部-->
      <el-header>
        <el-menu
            :default-active="activeIndex"
            class="HomeChoose"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
            router
        >
          <el-menu-item index="0">
            <img
                style="width: 60px"
                src="../assets/logo.png"
                alt="SC logo"
            />
          </el-menu-item>
          <div class="flex-grow"/>
          <el-menu-item index="home">
            <el-icon>
              <House/>
            </el-icon>
            首页
          </el-menu-item>
          <el-sub-menu :index="item.path" v-for="item in menu_data" :key="item.name">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{item.name}}</span></template>
            <el-menu-item :index="child.path" v-for="child in item.child" :key="child.name">
              <el-icon>
                <component :is="child.icon"></component>
              </el-icon>
              {{child.name}}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="announcement">
            <el-icon>
              <Help/>
            </el-icon>
            我的消息
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon>
              <Phone/>
            </el-icon>
            联系我们
          </el-menu-item>


          <div class="IDpicture">
            <el-input v-model="input2" class="searchFunction" placeholder="请输入搜索的功能">
              <template #suffix>
                <el-icon class="el-input__icon">
                  <search/>
                </el-icon>
              </template>
            </el-input>
            <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
        </el-menu>

      </el-header>

      <el-main>
        <el-row>
          <el-image style="width: 200px; height: 50px;margin-left: 8%;margin-top: 1%"
                    :src="require('@/assets/NEUSOFT.png')" :fit="fit"/>
          <el-input v-model="input2" class="searchGoods" placeholder="请输入搜索的商品">
            <template #suffix>
              <el-icon class="el-input__icon">
                <search/>
              </el-icon>
            </template>
          </el-input>
        </el-row>

        <el-container   class="deep-container" style="border-radius:20px;border: 2px solid #336FFF; width: 90%; height: 100%;margin: auto;margin-top: 2%">
          <el-header style="padding: 0;background-color: #FCFCFC;border-radius: 20px">
            <div style="font-family: Arial, sans-serif; font-size: 36px; font-weight: bold; margin-left: 60px;margin-top: 40px">我的收藏</div>
            <el-divider style="margin-top: 20px;margin-left: 3%; width: 93%"></el-divider>
            <el-row>
              <div style="font-family: Arial, sans-serif; font-size: 26px; font-weight: light; margin-left: 60px;margin-top: 40px">商品类别</div>
              <el-select
                  v-model="CateChoose"
                  clearable
                  placeholder="全部收藏"
                  style="width: 200px;
                                       margin-top:45px;
                                       margin-left:60px;
                                       "
                  @clear="GetsAllCollect"
              >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click="GetCollect"
                />
              </el-select>
            </el-row>
            <el-divider style="margin-top: 20px;margin-left: 3%; width: 93%"></el-divider>
          </el-header>
          <el-main style="margin-top:11%;border-radius: 20px">
            <el-row style="margin-left:10px;background-color: #FCFCFC;border-radius: 20px;">
              <el-col v-for="(item, index) in goods"
                      :key="item.id"
                      class="card-margin"
                      :span="4"
                      :offset="1"
                      style="margin-top: 5%;">
                <el-card class="goodsbox" :body-style="{height: '500px',padding:'0'}" style="max-height: 490px; width: 350px">
                  <img :src="addSlash(item.goodsUrl)"
                       style="height: 70%;width: 100%"/>
                  <div style="padding: 10px">
                    <div style="font-family: Arial, sans-serif; font-size: 19px; font-weight: lighter; padding: 10px">{{item.goodsName}}</div>
                    <div class="bottom">
                      <div style="font-family: Arial, sans-serif; font-size: 28px; font-weight: bold; color: crimson;padding:10px"><span style="font-size: 20px;">￥</span> {{item.goodsPrice}}</div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import *as allGoodsAPI from "../api/goods";
import {onMounted, ref} from 'vue'
import {useStore} from 'vuex'

const store=useStore()
const goods = ref([])
const activeIndex = ref('1')
const totalCount = ref(10);
const handleSelect = (index) => {
  activeIndex.value = index;
}

const CateChoose=ref("");

const GetsAllCollect=()=>{
  allGoodsAPI.IdCollect({userId:store.getters.getId}).then((res) => {
    console.log("!")
    goods.value = res.data;
    console.log(store.getters.getId)
  })
}

const GetCollect=()=>{
  allGoodsAPI.CateCollect({userId:store.getters.getId,goodsCate:CateChoose.value}).then((res) => {
    console.log()
    goods.value = res.data;
    console.log("2")
    console.log(store.getters.getId)
  })
}

//收藏分类选择
const options = [
  {
    value: '衣服',
    label: '衣服',
  },
  {
    value: '生活用品',
    label: '生活用品',
  },
  {
    value: '电子产品',
    label: '电子产品',
  },
  {
    value: '食品',
    label: '食品',
  },
  {
    value: '玩具',
    label: '玩具',
  },
  {
    value: '文具',
    label: '文具',
  },
  {
    value: '珠宝',
    label: '珠宝',
  },
  {
    value: '图书',
    label: '图书',
  },
  {
    value: '乐器',
    label: '乐器',
  },
  {
    value: '母婴',
    label: '母婴',
  },
  {
    value: '宠物',
    label: '宠物',
  },
  {
    value: '清洁',
    label: '清洁',
  },
]
//页头多级菜单
const menu_data = ref([
  {
    name: '物业服务',
    icon: 'OfficeBuilding',
    path: '/community',
    child: [
      {
        name: '物业费缴纳',
        icon: 'ChatRound',
        path: '/stratafees',
      },
      {
        name: '车位管理',
        icon: 'Pointer',
        path: '/park',
      },
      {
        name: '报事维修',
        icon: 'ChatRound',
        path: '/maintenance',
      },
      {
        name: '事项投诉',
        icon: 'ChatRound',
        path: '/complaints',
      },
      {
        name: '访客登记',
        icon: 'ChatRound',
        path: '/visitor',
      },
    ]
  },
  {
    name: '商城',
    icon: 'Goods',
    path: '/shop',
    child: [
      {
        name: '商城首页',
        icon: 'Goods',
        path: '/shophome',
      },
      {
        name: '我的收藏',
        icon: 'Goods',
        path: '/collect',
      },
      {
        name: '我的购物车',
        icon: 'Goods',
        path: '/shoppingcart',
      },
      {
        name: '我的订单',
        icon: 'Goods',
        path: '/order',
      },
      {
        name: '我的钱包',
        icon: 'Goods',
        path: '/wallet',
      }
    ]
  },

])
onMounted(() => {
  if(CateChoose.value="全部收藏"){
    allGoodsAPI.IdCollect({userId:store.getters.getId}).then((res) => {
      console.log("!")
      goods.value = res.data;
      console.log(store.getters.getId)
    })
  }
})

const addSlash = (url) => {
  return `/${url}`
}

</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.common-layout .el-container {
  width: 100%;
  height: 100%;
}

.common-layout .el-header {
  background-color: white;
  height: 8%;
}

.common-layout .el-main {
  background-color: #FCFCFC;
  height: 90%;
  width: 100%;
}

.searchGoods {
  width: 46%;
  height: 50px;
  margin-left: 8%;
  margin-top: 30px;
  border-radius: 50px;
}

.searchFunction {
  height: 28px;
  width: 80%;
  right: 40px;
}
/*头部边框阴影*/


.HomeChoose {
  height: 100%;
  border: none;
  padding: 0;
  box-shadow: 0px 2px 0px 0 rgba(0, 0, 0, 0.1);
  display: flex;
}

.flex-grow {
  flex-grow: 0;
}

.IDpicture {
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 让头像与其他内容分开排列 */
  align-items: center; /* 垂直居中对齐 */
  margin-left: 48%; /* 调整左右内边距 */
}
.card-margin{
  margin-right: 40px;
}
</style>